import {
    type ComponentPublicInstance,
    type ExtractPropTypes,
    type InjectionKey,
    type PropType,
} from 'vue'
import {
    baseProps,
    makeBooleanProp,
    makeNumberProp,
    makeStringProp,
} from '../common/props'

export type CollapseToggleAllOptions =
    | boolean
    | {
          expanded?: boolean
          skipDisabled?: boolean
      }

export type CollapseProvide = {
    props: Partial<CollapseProps>
    toggle: (name: string, expanded: boolean) => void
}

export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol('wd-collapse')

export const collapseProps = {
    ...baseProps,
    /**
     * 查看更多模式下的插槽外部自定义样式
     */
    customMoreSlotClass: makeStringProp(''),
    /**
     * 绑定值
     */
    modelValue: {
        type: [String, Array, Boolean] as PropType<
            string | Array<string> | boolean
        >,
    },
    /**
     * 手风琴模式
     */
    accordion: makeBooleanProp(false),
    /**
     * 查看更多的折叠面板
     */
    viewmore: makeBooleanProp(false),
    /**
     * 查看更多的自定义插槽使用标志
     */
    useMoreSlot: makeBooleanProp(false),
    /**
     * 查看更多的折叠面板，收起时的显示行数
     */
    lineNum: makeNumberProp(2),
}

export type CollapseProps = ExtractPropTypes<typeof collapseProps>

export type CollapseExpose = {
    /**
     * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
     * @param options 面板状态
     */
    toggleAll: (options?: CollapseToggleAllOptions) => void
}

export type CollapseInstance = ComponentPublicInstance<
    CollapseProps,
    CollapseExpose
>
